<template>
  <div>
    <el-select v-model="formData.provinceCode" @change="provinceChange" placeholder="省">
      <el-option v-for="it in provinces" :key="it.value" :label="it.label" :value="it.value"></el-option>
    </el-select>
    <el-select v-model="formData.cityCode" @change="cityChange" placeholder="市" class="address_select">
      <el-option v-for="it in cityList" :key="it.value" :label="it.label" :value="it.value"></el-option>
    </el-select>
    <el-select v-model="formData.areaCode" @change="areaChange" placeholder="区" class="address_select">
      <el-option v-for="it in areaList" :key="it.value" :label="it.label" :value="it.value"></el-option>
    </el-select>
  </div>
</template>

<script>
import json from "@/assets/json/place.json";
export default {
  data() {
    return {
      provinces: json, // 省数据（一个省中包含市的信息，一个市中包含区的信息）
      cityList: [], // 某省下市的列表数据
      areaList: [], // 某市下区的列表数据
      formData: {}
    };
  },
  methods: {
    // 操作：选择省，把省下的市的数据筛出来
    provinceChange(event) {
      let chooseProvince = this.provinces.find(it => {
        if (it.value === event) {
          return it;
        }
      });
      this.$set(this.formData, "province", chooseProvince.label);
      this.cityList = chooseProvince.children;
      this.$set(this.formData, "cityCode", "");
      this.$set(this.formData, "city", "");
      this.$set(this.formData, "areaCode", "");
      this.$set(this.formData, "area", "");
    },
    // 操作：选择市，把市下的区的数据筛出来
    cityChange(event) {
      let chooseCity = this.cityList.find(it => {
        if (it.value === event) {
          return it;
        }
      });
      this.$set(this.formData, "city", chooseCity.label);
      this.areaList = chooseCity.children;
      this.$set(this.formData, "areaCode", "");
      this.$set(this.formData, "area", "");
    },
    // 操作：选择区
    areaChange(event) {
      let chooseArea = this.areaList.find(it => {
        if (it.value === event) {
          return it;
        }
      });
      this.$set(this.formData, "area", chooseArea.label);
      console.log(this.formData);
    }
  }
};
</script>

<style scoped>
</style>

